{extend name="master/base" /}

{block name="content"}
<style>
  body {
    background-color: #ffffff;
  }

  .zyupload {
    margin: 0 !important;
  }
</style>

<body>

  <div class="layui-form layuimini-form">
    <div class="layui-form-item">
      <label class="layui-form-label required">名称</label>
      <div class="layui-input-block">
        <input type="text" name="swiper_name" lay-verify="required" lay-reqtext="名不能为空" placeholder="请输入名"
          value="{$swiper.swiper_name}" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label required">展示</label>
      <div class="layui-input-block">
        <input type="radio" name="is_show" value="1" title="是" {$swiper.is_show==1 ? 'checked' : '' }>
        <input type="radio" name="is_show" value="0" title="否" {$swiper.is_show==0 ? 'checked' : '' }>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label required">排序</label>
      <div class="layui-input-block">
        <input type="number" name="swiper_order" lay-verify="required" lay-reqtext="排序不能为空" placeholder="请输入1-100 越大越往后"
          value="{$swiper.swiper_order}" class="layui-input">
      </div>
    </div>


    <div class="layui-form-item">
      <label class="layui-form-label">图片上传</label>
      <div class="layui-input-block">
        <div id="zyupload" class="zyupload"></div>
        <input type="hidden" name="img_url" id="img_url" value="{$swiper.img_url}" />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">图片</label>
      <div class="layui-input-block">
        <img id="img" src="{$swiper.img_url}" alt="" srcset="">
      </div>
    </div>



    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
      </div>
    </div>
  </div>

  <script>
    $(function () {
      // 初始化插件
      $("#zyupload").zyUpload({
        width: "650px", // 宽度
        height: "400px", // 宽度
        itemWidth: "140px", // 文件项的宽度
        itemHeight: "115px", // 文件项的高度
        url: "/admin/swiper/upload", // 上传文件的路径
        fileType: ["jpg", "png", "txt", "js", "exe"], // 上传文件的类型
        fileSize: 51200000, // 上传文件的大小
        multiple: true, // 是否可以多个文件上传
        dragDrop: true, // 是否可以拖动上传文件
        tailor: true, // 是否可以裁剪图片
        del: true, // 是否可以删除文件
        finishDel: false, // 是否在上传文件完成后删除预览
        /* 外部获得的回调接口 */
        onSelect: function (selectFiles,
          allFiles) { // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
          console.info("当前选择了以下文件：");
          console.info(selectFiles);
        },
        onDelete: function (file, files) { // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
          console.info("当前删除了此文件：");
          console.info(file.name);
        },
        onSuccess: function (file, response) { // 文件上传成功的回调方法
          res = JSON.parse(response);
          if (res.status == 'success') {
            $("#uploadInf").append("<p style='color: green;'>上传成功</p>");
            $('#img_url').val(res.img_url);
            $('#img').attr('src', res.img_url);
          }
        },
        onFailure: function (file, response) { // 文件上传失败的回调方法
          console.info("此文件上传失败：");
          console.info(file.name);
        },
        onComplete: function (response) { // 上传完成的回调方法
          console.info("文件上传完成");
          console.info(response);
        }
      });

    });

    layui.use(['form'], function () {
      var form = layui.form,
        layer = layui.layer,
        $ = layui.$;

      //监听提交
      form.on('submit(saveBtn)', function (data) {
        // var index = layer.alert(JSON.stringify(data.field), {
        //     title: '最终的提交信息'
        // }, function () {
        //     // 关闭弹出层
        //     layer.close(index);
        //     var iframeIndex = parent.layer.getFrameIndex(window.name);
        //     parent.layer.close(iframeIndex);
        // });

        console.log(JSON.stringify(data.field));
        // 在edit中,因为是资源路由 应该是PUT->/admin/swiper/:id 对应 的是/admin/swiper/update
        $.ajax({
          url: "/admin/swiper/" + '{$swiper.id}', //请求的url地址
          data: data.field,
          type: "PUT", //请求方式
          beforeSend: function () {
            //请求前的处理
          },
          success: function (res) {
            if (res.status == 'success') {
              layer.msg(res.msg, function () {
                window.location = '/admin/swiper';
              });
            } else {
              layer.msg(res.msg);
              return false;
            }
          },
          complete: function () {
            //请求完成的处理
          },
          error: function () {
            //请求出错处理
          }
        });
        // $.post('/admin/swiper', data.field, function (res) {
        //   if (res.status == 'success') {
        //     layer.msg(res.msg, function () {
        //       window.location = '/admin/swiper';
        //     });
        //   } else {
        //     layer.msg(res.msg);
        //     return false;
        //   }
        // })
        return false;
      });

    });
  </script>
  {/block}